<template>
  <div class="my-form">
    <div>
      <slot name="header"></slot>
    </div>
    <el-row>
      <template v-for="(item, index) in formItems" :key="index">
        <el-col :span="item.span || 4">
          <!-- input 和密码框显示 -->
          <template v-if="item.type === 'input' || item.type === 'password'">
            <el-input v-model="formData[`${item.field}`]" :size="item.size || 'default'" :placeholder="item.placeholder" :show-password="item.type === 'password'" />
          </template>
          <!-- select 显示 -->
          <template v-else-if="item.type === 'select'">
            <el-select v-model="formData[`${item.field}`]" :placeholder="item.placeholder" :size="item.size || 'default'" style="width: 100%">
              <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <!-- 时间选择 -->
          <template v-if="item.type === 'datepicker'">
            <el-date-picker v-model="formData[`${item.field}`]" v-bind="item.otherDefine" type="daterange" range-separator="至" :size="item.size || 'default'" style="width: 100%" />
          </template>
        </el-col>
      </template>
    </el-row>
    <div>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue"
import { IFormItem } from "../types"
export default defineComponent({
  props: {
    modelValue: {
      type: Object,
      required: true
    },
    formItems: {
      type: Array as PropType<IFormItem[]>,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const formData = ref({ ...props.modelValue })
    // 箭头数据的改变 发出事件
    watch(
      formData,
      (newValue) => {
        emit("update:modelValue", newValue)
      },
      { deep: true }
    )
    return {
      formData
    }
  }
})
</script>

<style lang="less" scoped>
.el-col {
  margin-right: 30px;
}
</style>
